<template>
  <div class="setting">
    <template v-if="tabType == 'data'">
      <div class="card">
        <div class="title">样式选择</div>
        <div class="content">

          <el-form-item label="每行数量">
            <el-radio-group v-model="settingData.data.col">
              <el-radio :label="3">3个</el-radio>
              <el-radio :label="4">4个</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="边框">
            <el-switch
              v-model="settingData.data.border"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item> -->
        </div>
      </div>
      <dc-list
        v-model="settingData.data.list"
        :itemProp="{
          src: '',
          title: {
            text: '',
            color: '#333',
          },
          tip: {
            text: '',
            color: '#bbb',
          },
          url: '',
          badge: {
            show: 0,
            text: '',
            color: '#FFFFFF',
            bgColor: '#FF6000',
          },
        }"
      >
        <template #title>图标设置</template>
        <template #listItem="{ element }">
          <el-form-item label="图标">
            <div class="sa-flex">
              <sa-uploader v-model="element.src" fileType="image"></sa-uploader>
              <div class="tip">建议尺寸：44*44</div>
            </div>
          </el-form-item>
          <el-form-item label="标题">
            <dc-text-color
              v-model="element.title"
              placeholder="请输入标题"
              maxlength="5"
              show-word-limit
            ></dc-text-color>
          </el-form-item>
          <el-form-item label="功能提示">
            <dc-text-color
              v-model="element.tip"
              placeholder="请输入功能提示"
              maxlength="4"
              show-word-limit
            ></dc-text-color>
          </el-form-item>
          <el-form-item label="链接">
            <dc-url v-model="element.url"></dc-url>
          </el-form-item>
          <el-form-item label="标签">
            <el-switch v-model="element.badge.show" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <template v-if="element.badge.show">
            <el-form-item label="标签内容">
              <dc-text-color
                v-model="element.badge"
                placeholder="请输入标签内容"
                maxlength="4"
                show-word-limit
              ></dc-text-color>
            </el-form-item>
            <el-form-item label="标签背景">
              <dc-color-picker v-model="element.badge.bgColor"></dc-color-picker>
            </el-form-item>
          </template>
        </template>
      </dc-list>
    </template>
  </div>
</template>

<script setup>
  import dcColorPicker from '../../common/dc-color-picker.vue';
  import dcList from '../../common/dc-list.vue';
  import dcUrl from '../../common/dc-url.vue';
  import dcTextColor from '../../common/dc-text-color.vue';

  const props = defineProps(['settingData', 'tabType']);
</script>
